<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <link rel="shortcut icon" href="../img/favicon.ico" type="image/x-icon">
  <link rel="stylesheet" href="../css/style.css">
  <title>Array的变化侦测</title>
</head>

<body>
  <img src="../img/Array-Obser-array.png" alt="">
  <h2>数组的变化监听</h2>
  <h3>如何追踪变化</h3>
  <ul>
    <li>
        Object.defineProperty对数组不管用。
    </li>
    <li>
      用自定义方法，覆盖原生的原型，去达到一个拦截器的作用
    </li>
    <li>
      使用<span>拦截器覆盖原型</span>之后，每当使用Array原型上的方法操作数组时，其实执行的都是拦截器中提供的方法
    </li>
    <li>
      与Object侦测的相同之处在于，<span>得到通知的时机，都是在对象发生改变的时候</span>。得到通知的时机，对象是setter的时候，数组是调用push,shift,pop...等方法使得数组发生改变的时候
    </li>
  </ul>

  <h3>定义拦截器</h3>
  <li>
    复制一份数组原型方法，在新对象上重写这些方法
  </li>
  <li>
    当需要转化为响应式对象时，将这些数组的原型，覆盖为我们刚刚重写过的对象
  </li>

  <h3>收集数组的依赖</h3>
  <li>在getter中收集，当wather实例形成的时候，会读取自身依赖的属性数据，</li>
  <li>
    触发更新函数是在拦截器中<span>(拦截器监听了改变，类似Object中的setter监听了改变)</span>
  </li>

  <script src="../js/ArrayListening.js"></script>
</body>

</html>